<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue移动端滑动验证</title>
		<style>
		    .drag{
		        position: relative;
		        background-color: #e8e8e8;
		        width: 100%;
		        height: 34px;
		        line-height: 34px;
		        text-align: center;
		    }
		    .handler{
		        width: 40px;
		        height: 32px;
		        border: 1px solid #ccc;
		        cursor: move;
		    }
		    .handler_bg{
		        background: #fff url("") no-repeat center;
		    }
		    .handler_ok_bg{
		        background: #fff url("") no-repeat center;
		    }
		    .drag_bg{
		        background-color: #7ac23c;
		        height: 34px;
		        width: 0px;
		    }
		    .drag_text{
		        position: absolute;
		        top: 0px;
		        width: 100%;text-align: center;
		        -moz-user-select: none;
		        -webkit-user-select: none;
		        user-select: none;
		        -o-user-select:none;
		        -ms-user-select:none;
		    }
		</style>
	</head>
	<body>
		    <div class="drag_box" style="width: 260px; margin: 200px auto;">
				<div class="drag" ref="dragDiv">
				    <div class="drag_bg"></div>
				    <div class="drag_text">{{confirmWords}}</div>
				    <div ref="moveDiv" @touchstart="mousedownFn($event)" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg" style="position: absolute;top: 0px;left: 0px;"></div>
				</div>
			</div>
		<script src="js/vue-2.6.10.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var vm = new Vue({
				el: ".drag",
				data:{
					beginClientX:0,           /*距离屏幕左端距离*/
					mouseMoveStata:false,     /*触发拖动状态  判断*/
					maxwidth:'',               /*拖动最大宽度，依据滑块宽度算出来的*/
					confirmWords:'拖动滑块验证',   /*滑块文字*/
					confirmSuccess:false           /*验证成功判断*/
				},
				methods: {
				    mousedownFn:function (e) {
				        if(!this.confirmSuccess){
				            e.preventDefault && e.preventDefault();   //阻止文字选中等 浏览器默认事件
				            this.mouseMoveStata = true;
				            this.beginClientX = e.changedTouches[0].clientX;
				        }
				    },        //mousedoen 事件
				    successFunction(){
				        this.confirmSuccess = true
				        this.confirmWords = '验证通过';
						console.log('验证通过');
				        if(window.addEventListener){
				            document.getElementsByTagName('html')[0].removeEventListener('touchmove',this.mouseMoveFn);
				            document.getElementsByTagName('html')[0].removeEventListener('touchend',this.moseUpFn);
				        }else {
				            document.getElementsByTagName('html')[0].removeEventListener('touchend',()=>{});
				        }
				        document.getElementsByClassName('drag_text')[0].style.color = '#fff'
				        document.getElementsByClassName('handler')[0].style.left = this.maxwidth + 'px';
				        document.getElementsByClassName('drag_bg')[0].style.width = this.maxwidth + 'px';
				    },                //验证成功函数
				    mouseMoveFn(e){
				        if(this.mouseMoveStata){
				            let width = e.changedTouches[0].clientX - this.beginClientX;
				            if(width>0 && width<=this.maxwidth){
				                document.getElementsByClassName('handler')[0].style.left = width + 'px';
				                document.getElementsByClassName('drag_bg')[0].style.width = width + 'px';
				            }else if(width>this.maxwidth){
				                this.successFunction();
				            }
				        }
				    },                   //mousemove事件
				    moseUpFn(e){
				        this.mouseMoveStata = false;
				        var width = e.changedTouches[0].clientX - this.beginClientX;
				        if(width<this.maxwidth){
				            document.getElementsByClassName('handler')[0].style.left = 0 + 'px';
				            document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px';
				        }
				    }                       //mouseup事件
				},
				mounted(){
				    this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth;
				    document.getElementsByTagName('html')[0].addEventListener('touchmove',this.mouseMoveFn);
				    document.getElementsByTagName('html')[0].addEventListener('touchend',this.moseUpFn)
				}
			})
		</script>
		
		
	</body>
</html>
